<template>
  <div>
    <el-form-item v-show="ruleForm.type == '代码'" label="背景说明:">
      <el-input v-model="ruleForm.background" type="textarea" class="row10"></el-input>
    </el-form-item>
    <el-form-item label="题目内容:" prop="context">
      <Wangeditor id="context" :value="context" ref="contexteditor" :zIndex="10" :context="htmlcontext" height="320px">
      </Wangeditor>
    </el-form-item>

    <el-form-item label="提示说明:">
      <el-input v-model="ruleForm.tips" type="textarea" class="row10"></el-input>
    </el-form-item>

    <div class="row" v-show="ruleForm.type == '代码'">
      <div class="col">
        <el-form-item label="输入格式:">
          <el-input v-model="ruleForm.inputformat" type="textarea" class="row10"></el-input>
        </el-form-item>
      </div>
      <div class="col">
        <el-form-item label="输出格式:">
          <el-input v-model="ruleForm.outputformat" type="textarea" class="row10"></el-input>
        </el-form-item>
      </div>
    </div>
    <el-form-item label="测试用例:" v-show="ruleForm.type == '代码'">
      <div class="row">
        <div :style="{ width: '60px' }">
        </div>
        <div class="col text-center fw-bold">
          测试点输入
        </div>
        <div class="col text-center fw-bold">
          测试点输出
        </div>
        <div :style="{ width: '160px', textAlign: 'right' }">
          <el-button size="small" :disabled="Number(ruleForm.exampletest?.length) > 9"
            @click="ruleForm.exampletest ? ruleForm.exampletest?.push({}) : ruleForm.exampletest = [{}]" circle>
            <el-icon size="18px">
              <plus />
            </el-icon>
          </el-button>
          <el-button size="small" circle :disabled="ruleForm.exampletest?.length === 1"
            @click="ruleForm.exampletest?.pop()">
            <el-icon size="18px">
              <semi-select />
            </el-icon>
          </el-button>
        </div>
      </div>
    </el-form-item>

    <div class="row m-mb-3" v-show="ruleForm.type == '代码'" style="margin-bottom:18px;"
      v-for="(i, k) in ruleForm.exampletest">
      <div :style="{ width: '150px', textAlign: 'right' }">
        #{{ k + 1 }}
      </div>
      <div class="col">
        <el-input v-model="i.input" type="textarea" class="row10" :autosize="{ minRows: 3 }">
        </el-input>
      </div>
      <div class="col">
        <el-input v-model="i.output" type="textarea" class="row10" :autosize="{ minRows: 3 }">
        </el-input>
      </div>
    </div>
    <div class="row" v-if="['单选', '多选'].includes(ruleForm.type ? ruleForm.type : '')">
      <div class="col">
        <el-form-item label="选项A:">
          <Selectinput :text="selectsA[0]" :change="(v, t) => selectchange(v, t, 0)"></Selectinput>
        </el-form-item>
      </div>
      <div class="col">
        <el-form-item label="选项B:">
          <Selectinput :text="selectsA[1]" :change="(v, t) => selectchange(v, t, 1)"></Selectinput>
        </el-form-item>
      </div>
    </div>
    <div class="row" v-if="['单选', '多选'].includes(ruleForm.type ? ruleForm.type : '')">
      <div class="col">
        <el-form-item label="选项C:">
          <Selectinput :text="selectsA[2]" :change="(v, t) => selectchange(v, t, 2)"></Selectinput>
        </el-form-item>
      </div>
      <div class="col">
        <el-form-item label="选项D:">
          <Selectinput :text="selectsA[3]" :change="(v, t) => selectchange(v, t, 3)"></Selectinput>
        </el-form-item>
      </div>
    </div>
    <div class="row" v-if="ruleForm.type === '排序'">
      <div class="col-12" v-for="(i, key) in ruleForm.answer?.options || []">
        <el-form-item :label="`排序${key + 1}:`">
          <Selectinput :text="i" :change="(v, t) => mypaixuselectchange(v, t, key)"></Selectinput>
        </el-form-item>
      </div>

    </div>
    <el-form-item v-if="ruleForm.type === '排序'" label="修改排序:">
      <div class="row">
        <div class="col-6 text-right">
          <el-button @click="paixu(true)">增加</el-button>
        </div>
        <div class="col-6">
          <el-button @click="paixu(false)">减少</el-button>
        </div>
      </div>

    </el-form-item>
    <div v-if="'填空' == ruleForm.type">
      <el-form-item label="填空:" prop="answer">
        <el-input v-model="ruleForm.answer.answer" placeholder="请输入正确答案"></el-input>
      </el-form-item>
    </div>
    <el-form-item label="正确答案:" v-if="ruleForm.type == '判断'" prop="answer">
      <el-radio-group v-model="ruleForm.answer.answer">
        <el-radio :label="true">正确</el-radio>
        <el-radio :label="false">错误</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="正确答案:" v-if="ruleForm.type == '单选'" prop="answer">
      <el-radio-group v-model="ruleForm.answer.answer">
        <el-radio label="A">A</el-radio>
        <el-radio label="B">B</el-radio>
        <el-radio label="C">C</el-radio>
        <el-radio label="D">D</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="正确答案:" v-if="ruleForm.type == '多选'" prop="answer">
      <el-checkbox-group v-model="_checkbox">
        <el-checkbox label="A">A</el-checkbox>
        <el-checkbox label="B">B</el-checkbox>
        <el-checkbox label="C">C</el-checkbox>
        <el-checkbox label="D">D</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item v-if="istype" label="错误提示" v-show="ruleForm.type !== '代码'">
      <Wangeditor id="errormessage" :value="ruleForm.htmlerrormessage" ref="errormessagecontext" :zIndex="10"
        height="320px">
      </Wangeditor>
    </el-form-item>
    <!-- <el-form-item v-if="istype" v-show="ruleForm.type == '代码'" label="来源(oj网站):">
      <el-input v-model="ruleForm.dataform"></el-input>
    </el-form-item> -->
    <el-form-item v-if="istype" v-show="ruleForm.type == '代码'" label="备注:">
      <el-input v-model="ruleForm.info"></el-input>
    </el-form-item>
    <el-form-item v-if="istype" v-show="ruleForm.type == '代码'" label="来源（外部显示）:">
      <el-input v-model="ruleForm.source"></el-input>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { Plus, SemiSelect } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { assign } from "underscore";
import { computed, ref } from "vue";
import { useStore } from "vuex";
import { Storekey } from "../../../interface";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { getpidtoarr } from "../../../util/code";
import Selectinput from "../../components/selectinput.vue";
import Wangeditor from "../../components/wangeditor.vue";

type P = {
  ruleForm: Studycodemodel.Iquestion,
  grouplabel: Studycodemodel.ILabel[],
  checkbox: string[],
  selectsA: string[],
  selectchange: Function,
  context: string,
  htmlcontext: string,
  istype: boolean,
  errormessage: string
}

const prop = defineProps<P>()
const emit = defineEmits(["update:ruleForm", "update:checkbox"])
const contexteditor = ref()
const _checkbox = computed({
  get() {
    return prop.checkbox
  },
  set(e) {
    emit('update:checkbox', e)
  }
})
const errormessagecontext = ref()

function gethtml() {
  return contexteditor.value?.gethtml()
}
function getcontext() {
  return contexteditor.value?.getcontext()
}

function gethtmlerrormessage() {
  return errormessagecontext.value?.gethtml()
}

function geterrormessage() {
  return errormessagecontext.value?.getcontext()
}

const store = useStore(Storekey);
const setlabel = computed({
  get() {
    const n = prop.ruleForm.questionlabel?.map((e) => e.labelid) as number[];
    return getpidtoarr(n || [], store.state.label?.rows || []);
  },
  set(v: number[][]) {
    if (v.length > 5) {
      ElMessage.error("标签最多选择5个");
      return;
    }
    emit(
      "update:ruleForm",
      Object.assign(prop.ruleForm, {
        questionlabel: v.map((e) => {
          return {
            labelid: e[e.length - 1],
            questionid: prop.ruleForm?.ID,
          };
        }),
      })
    );
  },
});

function mypaixuselectchange(v = '', t = '', key = 0) {
  const answer = prop.ruleForm.answer || {
    answer: '',
    options: []
  }
  answer.options[key] = t ? t : v
  emit(
    "update:ruleForm",
    assign(prop.ruleForm, {
      answer,
    })
  );
}

function paixu(t: boolean) {
  const answer = prop.ruleForm.answer || {
    answer: '',
    options: []
  }
  if (t) {
    answer.options.push('')
  } else {
    answer.options.pop()
  }
  emit(
    "update:ruleForm",
    assign(prop.ruleForm, {
      answer,
    })
  );
}

defineExpose({
  gethtml,
  getcontext,
  gethtmlerrormessage,
  geterrormessage
})
</script>
